<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="layout :: common_header(~{::title})">
    <title>拼多多店铺概览 - 电商ERP系统</title>
</head>

<body th:replace="layout :: common_body(~{::div.layui-body})">
    <div class="layui-body" style="padding:15px;">

        <style>
            .message-body {}

            .message-top {
                background: #fff;
                padding: 30px;
            }

            .message-body .content-title {

                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .message-body .content-title .label {
                font-weight: bold;
                font-size: 16px;
                color: #333;
            }

            .message-body .content-title span {
                font-size: 13px;
                color: #999;
                margin-left: 5px;
            }

            .message-body .order-list {
                display: flex;
                align-items: center;
                justify-content: space-around;
                background: #F2F2F2;
            }

            .message-body .order-item {
                width: 20%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 40px 0;
                margin: 10px;
                background: #fff;
            }

            .message-body .order-label {
                font-size: 14px;
                color: #999;
            }

            .message-body .order-num {
                margin-top: 20px;
                font-size: 20px;
                font-weight: bold;
            }

            .message-card-box {
                background: #fff;
                margin: 10px auto;
                /*padding: 60px 0;*/
            }

            /* .my-tab-brief{
            background: #fff;
            width: 98%;
            margin: 0 auto;
        } */
            .my-tab-brief .layui-tab-title {
                background: #fff;
                display: flex;

            }

            .my-tab-brief .layui-tab-title li {
                border-right: 1px solid #e6e6e6;
                width: 20%;
                padding: 0;
                margin: 0;
            }

            .my-tab-brief .layui-tab-title span {
                color: #FF5722;
                margin-left: 5px;
                font-weight: bold;
            }

            .my-tab-brief .layui-tab-title li:last-child {
                border-right: none;
            }

            .my-tab-brief .layui-tab-title .layui-this {
                border-right: none;
                background: #009688;
                color: #fff;
            }

            .my-tab-brief .massgae-box {
                padding: 0 15px;
            }

            .my-tab-brief .message-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px 0;
                line-height: 24px;
                color: #999;
            }

            .message-left {
                width: 80%;
                display: flex;
                align-items: center;
            }

            .message-left img {
                margin-right: 5px;
                width: 50px;
                height: 50px;
                object-fit: contain;
            }

            .message-right {
                color: #999;
            }
        </style>

        <link rel="stylesheet" href="/css/order1.css" />
        <!-- <div class="layui-tab layui-tab-brief " lay-filter="demo">
            <ul class="layui-tab-title">
                <li class="layui-this"><a th:href="@{/pdd/dashboard(shopId=${shopId})}">店铺概览</a></li> -->
                <!-- <li><a th:href="@{/pdd/order_list(shopId=${shopId})}">订单管理</a></li>
                <li><a th:href="@{/pdd/refund_list(shopId=${shopId})}">退货管理</a></li>
                <li><a th:href="@{/shop/goods_list(shopType=5,shopId=${shopId})}">商品管理</a></li>
                <li><a th:href="@{/pdd/sales_report(shopId=${shopId})}">销售统计</a></li>
                <li><a th:href="@{/pdd/send_report(shopId=${shopId})}">发货统计</a></li> -->
            <!-- </ul>
        </div> -->
        <fieldset class="layui-elem-field message-body">
            <legend>
                <div>
                    <span class="label" th:if="${shopId == null || shopId == 0}">今日数据</span>
                    <span class="label" th:if="${shopId > 0 }" th:text="${shop.name}"></span>
                    <a th:if="${shopId > 0 }" class="layui-btn layui-btn-normal" style="margin-left: 15px;"
                        th:href="@{'/pdd/oauth?shopId='+${shopId}}">拼多多店铺授权</a>
                    <span th:if="${shopId > 0 }">最后授权时间：<b
                            th:text="${#dates.format(shop.modifyOn * 1000,'yyyy-MM-dd HH:mm:ss')}"></b></span>
                </div>
            </legend>
            <div class="layui-field-box message-top">
                <div class="order-list">

                    <a th:href="@{/pdd/order_list(status=1,refundStatus=1,shopId=${shopId})}" class="order-item">
                        <div class="order-label">待发货订单</div>
                        <div class="order-num" th:text="${report.waitSend}" style="color: red">100</div>
                    </a>
                    <a th:href="@{/pdd/refund_list(shopId=${shopId},shippingStatus=1,auditStatus=0)}" class="order-item">
                        <div class="order-label">待处理售后</div>
                        <div class="order-num" th:text="${report.waitRefund}" style="color: rgb(215, 253, 22)">100</div>
                    </a>
                    <a th:href="@{/pdd/sales_report(shopId=${shopId})}" class="order-item">
                        <div class="order-label">今日订单</div>
                        <div class="order-num" th:text="${report.todayOrder}" style="color: #018AED">100</div>
                    </a>
                    <a th:href="@{/pdd/sales_report(shopId=${shopId})}" class="order-item">
                        <div class="order-label">今日有效订单</div>
                        <div class="order-num" th:text="${report.todayValidOrder}" style="color: #018AED">100</div>
                    </a>
                    <a th:href="@{/pdd/sales_report(shopId=${shopId})}" class="order-item">
                        <div class="order-label">今日有效订单金额</div>
                        <div class="order-num" th:text="${#numbers.formatDecimal(report.todayValidOrderAmount,1,2)}" style="color: #018AED">100</div>
                    </a>
                    <a th:href="@{/pdd/send_report(shopId=${shopId})}" class="order-item">
                        <div class="order-label">今日发货订单</div>
                        <div class="order-num" th:text="${report.todaySend}" style="color: #9F9F9F">100</div>
                    </a>

                    <a th:href="@{/pdd/order_list(status=2,refundStatus=1,shopId=${shopId})}" class="order-item">
                        <div class="order-label">待签收订单</div>
                        <div class="order-num" th:text="${report.waitReceving}" style="color: red">100</div>
                    </a>
                    <!-- <div class="order-item">
                    <div class="order-label">已签收订单</div>
                    <div class="order-num" th:text="${report.hasReceving}" style="color: #28a605">100</div>
                </div> -->

                    
                    <!-- <div class="order-item">
                    <div class="order-label">已完成售后</div>
                    <div class="order-num" th:text="${report.hasRefund}" style="color: #9F9F9F">100</div>
                </div> -->
                </div>
            </div>

        </fieldset>


        <fieldset class="layui-elem-field ">

            <div class="layui-tab layui-tab-brief" lay-filter="demo">
                <ul class="layui-tab-title">
                    <li class="layui-this">店铺数据</li>
                </ul>
            </div>
            <div id="data_report" style="width: 1500px;height:700px;"></div>

        </fieldset>


        <fieldset class="layui-elem-field ">
            <legend>功能导航</legend>
            <div class="layui-field-box ">
                <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                    th:href="@{/shop/goods_traffic_pdd(shopId=${shopId})}"><img src="/images/traffic.jpeg" width="25px" height="25px" />商品访问明细</a>

                <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                   th:href="@{/pdd/sales_report/(shopId=${shopId})}"><img src="/images/tongji.jpeg" width="25px" height="25px" />销售数据</a>

                <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                    th:href="@{/shop/goods_list(shopId=${shopId},shopType=5)}"><img src="/images/goods.jpeg" width="25px" height="25px" />商品管理</a>

                <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                   th:href="@{/pdd/order_list(shopId=${shopId})}"><img src="/images/order.jpeg" width="25px" height="25px" />订单管理</a>
                <a class="layui-btn layui-btn-primary" style="margin-left: 15px;"
                    th:href="@{/pdd/refund_list(shopId=${shopId})}">退货管理</a>

                
            </div>
        </fieldset>
        <fieldset class="layui-elem-field message-body">
            <legend>拉取订单</legend>
            <div class="layui-field-box message-top">
                <div class="order-list">
                    <div class="order-item" th:each="item:${shops}" >
                        <div class="card-title">
                            <span th:text="${item.name}"></span>
                        </div>
                        <div class="card-content">
                           
                                <div class="layui-inline" >
                                    <span  th:attr="shopId=${item.getId()}" class="layui-btn upd_pdd_order layui-btn-primary layui-btn-sm">拉取pdd订单</span>
                                    <span  style="display: none;" class="update upd_pdd_order_"><i></i>拉取中</span>
                                </div>
                                <div class="layui-inline" >
                                    <a  th:href="@{/pddSocket(shopId=${item.getId()})}" target="_blank" class="layui-btn layui-btn-primary layui-btn-sm">开启pdd消息</a>
                        
                                </div>
                        </div>

                    </div>
                </div>
            </div>
        </fieldset>
        <link rel="stylesheet" href="/sb/stock.css"/>
        <fieldset class="layui-elem-field ">
            <legend>动销榜</legend>
    <div class="sp-wrapper">
        <div class="sp-table">
            <table>
                <thead>
                <tr>
                    <th>商品ID</th>
                    <th>商品图片</th>
                    <th>商品名</th>
                    <th>总销量</th>
                    <th>今天销量</th>
                    <th>昨天销量</th>
                    <th>前天销量</th>
                    <th>3天销量</th>
                    <th>7天销量</th>
                    <th>15天销量</th>
                    <th>30天销量</th>
          
                </tr>
                </thead>
                <tbody id="sp-data">
                <tr th:each="item:${saleReport}">
                    <td><span th:text="${item.goodsId}"></span></td>
                    <td>
                        <img th:src="${item.image}" width="50px" height="50px" />
                    </td>
                    <td><span th:text="${item.name}"></span></td>
                    <td><span th:text="${item.total}"></span></td>
                    <td><span th:text="${item.DAY0}"></span></td>
                    <td><span th:text="${item.DAY1}"></span></td>
                    <td><span th:text="${item.DAY2}"></span></td>
                    <td><span th:text="${item.DAY3}"></span></td>
                    <td><span th:text="${item.DAY7}"></span></td>
                    <td><span th:text="${item.DAY15}"></span></td>
                    <td><span th:text="${item.DAY30}"></span></td>
       
                </tr>
                </tbody>
            </table>
            <div class="pages">
                <paging:pager th:value="${pageIndex}" th:rows="${totalSize}" th:size="${pageSize}"/>
            </div>
        </div>
    </div>
</fieldset>
        
        <link rel="stylesheet" href="/goods/order.css"/>
        <fieldset class="layui-elem-field ">
            <legend>商品销售退货统计</legend>
            <div class="dd-wrapper">
                <table class="dd-table" style="width: 60%;">
                    <tr>
                        <th>序号</th>
                        <th>主图</th>
                        <th>标题</th>
                        <th>编码</th>
                        <th>pddID</th>
                        <th>总销量</th>
                        <th>退货数量</th>
                        <th>退货率</th>
                        
                    </tr>
                    <tr th:each="item:${salesAndRefund}">
                        <td th:text="${itemStat.index+1}"></td>
                        <td>
                            <div ><img th:src="${item.goodsImage}" style="width: 50px; height:50px">
                            </div>
                        </td>
                        <td th:text="${item.goodsNick}"></td>
                        <td th:text="${item.goodsNum}"></td>
                        
                        <td>
                            <span  th:text="${item.goodsId}"></span>
                            
                        </td>
                        <td>
                            <span th:text="${#numbers.formatDecimal(item.salesTotal,0,0)}"></span>
                        </td>
                        
                        <td><span style="color: red;" th:text="${#numbers.formatDecimal(item.refundTotal,0,0)}"></span></td>
                        <td>
                            <span style="color:rgb(199, 8, 8);"  th:text="${#numbers.formatDecimal(item.refundTotal / item.salesTotal * 100,1,2)}"></span>%
                        </td>
                      
                    </tr>
                </table>
            </div>
            
        </fieldset>


        <!-- <script type="text/javascript" src="/goods/Tips/Tips.min.js"></script> -->
        <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                //更新订单
                $(".upd_pdd_order").click(function () {
                        var shopId = $(this).attr('shopId');
                        if(shopId==0||shopId == ''||shopId =='null'||shopId==null) {alert("请选择店铺");return;}
                        var $this =  $(this);

                        
                        $this.hide();
                        $this.siblings("span").show();
                        let data = {
                            startTime:null,
                            endTime:null,
                            updType:0,
                            shopId:shopId
                        };
                        console.log(data);
                        if(!confirm("要拉取订单吗？")) return;
                        $.ajax({
                            url: "/ajax_pdd/pull_order",
                            type: "POST",
                            dataType: "JSON",
                            contentType: 'application/json',
                            data:JSON.stringify(data),
                            success: function (res) {
                                console.log(res);
                            
                                // if (res.code == 0) {
                                    
                                //     // Tips.alert({
                                //     //     title: '更新订单',
                                //     //     content: '更新结果：【'+JSON.stringify(res.data )+'】',
                                //     //     define: function () {
                                //     //         // location.href = "/pdd/order_list?shopId="+shopId;
                                //     //         location.reload();
                                //     //     }
                                //     // });
                                // }else if(res.code==601){
                                //     // $("#upd_order").show();
                                //     // $("#upd_order_").hide();
                                //     alert(res.msg);
                                //     // Tips.alert(res.msg);
                                //     location.href = "/pdd/oauth?shopId="+shopId;
                                // }
                                // else {
    
                                //     //Tips.alert(res.msg);
                                // }
                                $this.show();
                                // $this.siblings("upd_pdd_order_").hide();
                            }
                        })
                    });
    
            })
        </script>

        <script src="/echart.js"></script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('data_report'));

            let allData = [] // 用于储存数据

            // 指定图表的配置项和数据
            var option = {
                legend: {},
                tooltip: {},
                dataset: {
                    dimensions: ['product', '访客(人)', '收藏量', '订单数','访问商品数'],
                    source: [
                        // ['2021/4/5', 13, 20, 30],

                    ]
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{
                    type: 'bar',
                    color: "#f7b00b",
                    barMaxWidth: 30
                }, {
                    type: 'bar',
                    color: "#f59c9c",
                    barMaxWidth: 30
                }, {
                    type: 'bar',
                    color: "#54c0eb",
                    barMaxWidth: 30
                }, {
                    type: 'bar',
                    color: "#4700eb",
                    barMaxWidth: 30
                }]
            };
            //var reqData = {start:'[[${startDate}]]',end:'[[${endDate}]]',zhanghao:'[[${zhanghao}]]'};
            $.ajax({
                url:'/ajax_pdd/report_data',
                type:'POST',
                dataType:'json',
                contentType: 'application/json',
                //data:JSON.stringify(reqData),
                success:function(res){
                    if(res.code==0){
                        res.data.forEach(i => {
                            let arr = [i.date, i.fks , i.scs, i.dds,i.fwsps] // 对应的数据
                            allData.push({
                                arr
                            })
                        })

                        let barData = allData.map(i => i.arr) // 过滤后的柱形数据
                        console.log(barData);
                        option.dataset.source = barData
                        myChart.setOption(option);
                    }
                }
            });



        </script>
    </div>
</body>

</html>